<!--{include admin_header}-->
                <div class="main-content">
					<div class="breadcrumbs" id="breadcrumbs">
						<script type="text/javascript">
							try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
						</script>

<!--{include admin_breadcrumb}-->
						<div class="nav-search" id="nav-search">
							<form class="form-search" method="get">
<!--{loop $query_string $k $v}-->
<!--{if $k != 'totalsearch'}-->
								<input type="hidden" name="{$k}" value="${htmlspecialchars($v)}" />
<!--{/if}-->
<!--{/loop}-->
								<span class="input-icon">
									<input type="text" name="totalsearch" value="{$totalsearch}" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
									<i class="icon-search nav-search-icon"></i>
								</span>
							</form>
						</div><!-- #nav-search -->
					</div>

					<div class="page-content">
						<div class="page-header">
							<h1>{$_G['admincp']['actname']}<small><i class="icon-double-angle-right"></i>{$_G['admincp']['optname']}</small></h1>
						</div><!-- /.page-header -->

						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="row">
									<div class="col-xs-12">
										<div class="table-responsive">

                                                    <div class="widget-box">
                                                        <div class="widget-header widget-header-flat">
                                                            <h4 class="smaller"><i class="icon-quote-left smaller-80"></i> 服务器状态</h4>
                                                        </div>

                                                        <div class="widget-body">
                                                            <div class="widget-main">
                                                                <div class="row switch-div switch-table">
                                                                    <div class="profile-user-info profile-user-info-striped">

                                                                        <div class="profile-info-row">
                                                                            <div class="profile-info-name"> 状态 </div>
                        
                                                                            <div class="profile-info-value">
                                                                                <i class="server-status icon-circle grey"></i>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="widget-box">
                                                        <div class="widget-header widget-header-flat">
                                                            <h4 class="smaller"><i class="icon-quote-left smaller-80"></i> 线路状态</h4>
                                                            <div class="widget-toolbar">
                                                                <label>
                                                                    <small class="green">
                                                                        <b>表格</b>
                                                                    </small>
    
                                                                    <input id="id-check-switch" type="checkbox" class="ace ace-switch ace-switch-6"><span class="lbl"></span>
                                                                </label>
                                                            </div>
                                                        </div>

                                                        <div class="widget-body">
                                                            <div class="widget-main">
                                                                <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                                                                    <thead>
                                                                        <tr>
                                                                            <th class="center">
                                                                                <label>
                                                                                    <input type="checkbox" class="ace">
                                                                                    <span class="lbl"></span>
                                                                                </label>
                                                                            </th>
                                                                            <th>线路</th>
                                                                            <th>通道号码</th>
                                                                            <th>方向</th>
                                                                            <th>对方号码</th>
                    
                                                                            <th>
                                                                                <i class="icon-time bigger-110"></i> 时长
                                                                            </th>
                                                                            <th>状态</th>
                    
                                                                            <th></th>
                                                                        </tr>
                                                                    </thead>
                    
                                                                    <tbody id="line-table"></tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>


										</div><!-- /.table-responsive -->
											{$pages['pages']}
									</div><!-- /span -->
								</div><!-- /row -->
								<div class="hr hr-18 dotted hr-double"></div>

                                <div id="modal-form" class="modal" tabindex="-1">
									<div class="modal-dialog">
										<div class="modal-content">
											
											<div id="sms-body" class="modal-body overflow-visible">
												<div class="row">
													<div class="col-xs-12 col-sm-12">
														<div class="form-group">
															<div class="col-xs-12 col-sm-12">
                                                                <input type="text" name="mobiles" class="form-field-tags" value="" placeholder="输入手机号码" />
															</div>
														</div>

														<div class="space-4"></div>

														<div class="form-group">
															<div class="col-xs-12 col-sm-12">
																<div class="widget-box col-sm-12">
																	<div class="widget-header widget-header-small header-color-blue"></div>
																	<div class="widget-body">
																			<div class="widget-main no-padding">
																				<textarea class="span12" name="content" data-provide="markdown" rows="10"></textarea>
																			</div>
																		</div>
																	</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div>
		<!-- page specific plugin scripts -->
<!--{include admin_footer}-->
		<link rel="stylesheet" href="/static/ace/assets/css/select2.css" />
		<script src="/static/ace/assets/js/jquery.dataTables.min.js"></script>
		<script src="/static/ace/assets/js/jquery.dataTables.bootstrap.js"></script>
		<script src="/static/ace/assets/js/select2.min.js"></script>
		<script src="/static/ace/assets/js/bootstrap-tag.min.js"></script>
		<script src="/static/ace/assets/js/markdown/markdown.min.js"></script>
		<script src="/static/ace/assets/js/markdown/bootstrap-markdown.min.js"></script>
		<script src="/static/derek/jquery.json-2.4.min.js"></script>
		<!-- inline scripts related to this page -->

		<script id="line-template" type="text/tpl">
																		<tr cid="{cid}">
                                                                            <td class="center">
                                                                                <label>
                                                                                    <input type="checkbox" value="{cid}" name="cid" class="ace">
                                                                                    <span class="lbl"></span>
                                                                                </label>
                                                                            </td>
                    
                                                                            <td>
                                                                                通道{cname}
                                                                            </td>
                                                                            <td>{ccode}</td>
                                                                            <td class="CN-{cid}-action">{action}</td>
                                                                            <td class="CN-{cid}-phone">{phone}</td>
                                                                            <td class="CN-{cid}-time">{time}</td>
                    
                                                                            <td>
                                                                                <span class="label label-sm label-success CN-{cid}-status">{status}</span>
                                                                            </td>
                    
                                                                            <td>
                                                                                <div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
                                                                                    <button class="btn btn-xs btn-success">
                                                                                        <i class="icon-ok bigger-120"></i>
                                                                                    </button>
                    
                                                                                    <button class="btn btn-xs btn-info">
                                                                                        <i class="icon-edit bigger-120"></i>
                                                                                    </button>
                    
                                                                                    <button class="btn btn-xs btn-danger">
                                                                                        <i class="icon-trash bigger-120"></i>
                                                                                    </button>
                    
                                                                                    <button class="btn btn-xs btn-warning">
                                                                                        <i class="icon-flag bigger-120"></i>
                                                                                    </button>
                                                                                </div>
                    
                                                                                <div class="visible-xs visible-sm hidden-md hidden-lg">
                                                                                    <div class="inline position-relative">
                                                                                        <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                                                                                            <i class="icon-cog icon-only bigger-110"></i>
                                                                                        </button>
                    
                                                                                        <ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
                                                                                            <li>
                                                                                                <a href="#" class="tooltip-info" data-rel="tooltip" title="" data-original-title="View">
                                                                                                    <span class="blue">
                                                                                                        <i class="icon-zoom-in bigger-120"></i>
                                                                                                    </span>
                                                                                                </a>
                                                                                            </li>
                    
                                                                                            <li>
                                                                                                <a href="#" class="tooltip-success" data-rel="tooltip" title="" data-original-title="Edit">
                                                                                                    <span class="green">
                                                                                                        <i class="icon-edit bigger-120"></i>
                                                                                                    </span>
                                                                                                </a>
                                                                                            </li>
                    
                                                                                            <li>
                                                                                                <a href="#" class="tooltip-error" data-rel="tooltip" title="" data-original-title="Delete">
                                                                                                    <span class="red">
                                                                                                        <i class="icon-trash bigger-120"></i>
                                                                                                    </span>
                                                                                                </a>
                                                                                            </li>
                                                                                        </ul>
                                                                                    </div>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
        </script>


		<script type="text/javascript">
			Math.rand = function(l,u){
				return Math.floor((Math.random() * (u-l+1))+l);
			}

			log_time = function(begin_time, end_time){
				if( !begin_time || !end_time ){
					return '00:00:00';
				}
				var time = end_time - begin_time;
				var i = Math.abs(parseInt(time / 60));
				var h = Math.abs(parseInt(i / 60));
				i -= (h * 60);
				var s = Math.abs(parseInt(time % 60));
				time = pad(h) + ':' + pad(i) + ':' + pad(s);
				return time;
			}
			
			pad = function(s){
				return s.toString().length >= 2 ? s : '0' + s;
			}
			var Channels = ${json_encode($channels)};
			D.WS = {
				host : 'ws://{$call['serv-ip']}:8181/',
				debug : ${$_G['gp_debug'] ? 1 : 0},
				timer : 3,
				socket : null,
				keeper : 1,
				timerup : 0,
				messages : {},
				init : function(){
					if( !D.WS.debug ){
						$('.console').hide();
					}
					D.WS.create();
				},
				messageid : function(){
					var id = Math.rand(999, 9999999);
					if( D.WS.messages[id] ){
						id = D.WS.messageid();
					}
					return id;
				},
				create : function(){
					D.WS.timerup = 0;
					D.WS.timer = 3;
					D.WS.console('Connecting...');
					$('.server-status').removeClass('grey red green').addClass('orange');
					D.WS.socket = new WebSocket(D.WS.host);
					D.WS.socket.onopen = D.WS.on.open;
					D.WS.socket.onmessage = D.WS.on.message;
					D.WS.socket.onclose = D.WS.on.close;
					D.WS.recreate();
					return D.WS.socket;
				},
				recreate : function(){
					if( D.WS.timerup >= 300 ){
						D.WS.socket.close();
						D.WS.socket = null;
						D.WS.create();
					}else{
						D.WS.timerup++;
						setTimeout(D.WS.recreate, 1000);
					}
				},
				command : function(action, data, callback){
					D.WS.send(99, action, data, callback);
				},
				send : function(channel, action, data, callback){
					action = action ? action : null;
					data = data ? data : null;
					var data = {
						channel : channel,
						action : action,
						data : data
					};
					if( callback ){
						data['messageid'] = D.WS.messageid();
						D.WS.messages[data['messageid']] = {
							func : callback,
							status : 'listen'
						};
					}
					data = $.toJSON(data);
					D.WS.socket.send(data);
				},
				on : {
					open : function(event){
						$('.server-status').removeClass('grey red orange').addClass('green');

						D.WS.keeper = 1;
						D.WS.console('Connected');
						D.WS.socket.send(99);
						D.WS.command('public.get.device.info', '');
						D.WS.command('public.get.device.status', '', function(data){
							if( data.channels ){
								var channels = {};
								$.each(data.channels, function(k, v){
									var c = {
										id : v.id,
										status : 'free',
										time : 0
									};
									if ( v.phone ){
										c.status = v.action;
									}else if( v.hook_time ){
										c.status = 'hook';
									}
									channels[k] = c;
								});
								D.Channel.set(channels);
							}
						});
					},
					message : function(event){
						D.WS.timerup = 0;
						var data = event.data;
						console.log(data);
						data = eval('(' + data + ')');
						if( data.messageid ){
							if( D.WS.messages[data.messageid] ){
								D.WS.messages[data.messageid].status = 'ok';
								if( typeof(D.WS.messages[data.messageid].func) == 'function' ){
									D.WS.messages[data.messageid].func(data);
								}
							}
						}else{
							if( data.action && data.data ){
								var datas = D.explode('.', data.data);
								D.Channel.on.event(datas[0], data.action, datas[1]);
							}
						}
					},
					close : function(event){
						$('.server-status').removeClass('grey green orange').addClass('red');
						console.log("Disconnected");
						D.WS.console('Disconnected');
						D.WS.keep();
					}
				},
				keep : function(){
					if( D.WS.timer <= 0 ){
						D.WS.keeper++;
						D.WS.create();
					}else{
						D.WS.console('(' + D.WS.keeper + ')Ready Try Reconnect ' + D.WS.timer);
						D.WS.timer--;
						setTimeout(D.WS.keep, 1000);
					}
				},
				console : function(msg){
					$('#console').append('<div>[root@heivr ~] ' + msg + '</div>').scrollTop($('#console')[0].scrollHeight);
				}
			}

			D.Channel = {
				channels : {},
				set : function(json){
					$('#line-table').html('');
					$.each(json, function(k, v){
						D.Channel.create(v);
					});
				},
				create : function(channel){
					D.Channel.channels[channel.id] = channel;
					var data = {
						cid : channel.id,
						cname : (parseInt(channel.id) + 1),
						phone : channel.phone
					}
					data['ccode'] = Channels[data.cname]['tel'];

					if( channel.status == 'call' ){
						data['action'] = '呼出';
					}else if( channel.status == 'income' ){
						data['action'] = '呼入';
					}
					$('#line-table').append(D.T.selector('#line-template', data));
					if( typeof(D.Channel.on[channel.status]) == 'function' ){
						D.Channel.on[channel.status](channel);
					}
				},
				on : {
					free : function(channel){
						D.Channel.channels[channel.id].status = 'free';
						$('.CN-'+channel.id+'-status').html('空闲');
						$('.CN-'+channel.id+'-phone').html('');
						$('.CN-'+channel.id+'-action').html('');
						$('.CN-'+channel.id+'-time').html('00:00:00');
					},
					hook : function(channel){
						$('.CN-'+channel.id+'-status').html('摘机');
					},
					call : function(channel){
						if( D.Channel.channels[channel.id].status == 'call' ){
							var time = Math.round(new Date().getTime()/1000);
							$('.CN-'+channel.id+'-time').html(log_time(channel.time, time));
							$('.CN-'+channelid+'-status').html('通话中...');
							setTimeout(function(){
								D.Channel.on.call(channel);
							}, 1000);
						}
					},
					event : function(channelid, e, data){
						D.Channel.channels[channelid].status = e;
						var e = D.explode('.', e);
						if( typeof(D.Channel.event[e[0]][e[1]]) == 'function' ){
							D.Channel.event[e[0]][e[1]](channelid, data);
						}
					}
				},
				event : {
					local : {
						hook : function(channelid){
							$('.CN-'+channelid+'-status').html('本地摘机');
						},
						hangup : function(channelid){
							D.Channel.on.free(D.Channel.channels[channelid]);
						}
					},
					remote : {
						hook : function(channelid){
							D.Channel.channels[channelid].status = 'call';
							D.Channel.channels[channelid].time = Math.round(new Date().getTime()/1000);
							D.Channel.on.call(D.Channel.channels[channelid]);
						},
						hangup : function(channelid){
							D.Channel.on.free(D.Channel.channels[channelid]);
						}
					},
					call : {
						dialTone : function(channelid){
							$('.CN-'+channelid+'-status').html('检测到拨号音');
						},
						dial : function(channelid, data){
							$('.CN-'+channelid+'-status').html('电话机拨号');
							$('.CN-'+channelid+'-phone').html(data);
							$('.CN-'+channelid+'-action').html('去电');
						},
						income : function(channelid, data){
							$('.CN-'+channelid+'-status').html('有来电..');
							$('.CN-'+channelid+'-phone').html(data);
							$('.CN-'+channelid+'-action').html('来电');
						},
						miss : function(channelid){
							D.Channel.on.free(D.Channel.channels[channelid]);
						},
						ring : function(channelid){
							$('.CN-'+channelid+'-status').html('呼叫中..');
						}
					}
				}
			}

			D.Main = {
				del : function(){
					$('.delete-checks').on('click', function(){
						var lists = $('.checklist:checked');
						var datas = [];
						$.each(lists, function(i, n){
							datas.push($(this).val());
						});
						window.location.href = ('?action=customer&operation=delete&ids=' + datas.join(','));
						return false;
					});
				},
				expt : function(){
					$('.export-checks').on('click', function(){
						var lists = $('.checklist:checked');
						var datas = [];
						$.each(lists, function(i, n){
							datas.push($(this).val());
						});
						window.open('?action=customer&operation=index&export=' + datas.join(','));
						return false;
					});
				},
				checkbox : function(){
					var lists = $('.checklist:checked');
					if( lists.length > 0 ){
						$('.act-lists').removeClass('hide');
					}else{
						$('.act-lists').addClass('hide');
					}
				},
				init : function(){
					D.Main.del();
					D.Main.expt();
					$('.checklist').change(function(){
						D.Main.checkbox();
					});

					$('.send-sms').on('click', function(){
						var lists = $('.admin-checkbox:checked');
						var mobiles = [];
						$.each(lists, function(i, n){
							var box = $(this).parent().parent().parent().children('.cdata-phone');
							if ( box.text().length > 1 ){
								mobiles.push(box.text());
							}
						});
						bootbox.dialog({
							message: $('.modal-body').html(),
							title: "短信营销",
							buttons: {
								success: {
									label: "确认发送",
									className: "btn-success",
									callback: function() {
										var sms_mobiles = $('.bootbox input[name="mobiles"]').val();
										var content = $('.bootbox textarea[name="content"]').val();
										var send_valid = true;
										if( !sms_mobiles ){
											send_valid = false;
											$.gritter.add({
												title: '警告',
												text: '请输入至少一个正确的手机号码',
												class_name: 'gritter-error gritter-light'
											});
										}
										if( !content ){
											send_valid = false;
											$.gritter.add({
												title: '警告',
												text: '请输入发送内容',
												class_name: 'gritter-error gritter-light'
											});
										}
										if( send_valid ){
											bootbox.hideAll();
											D.loading.bootbox();
											var data = {
												mobiles : sms_mobiles,
												content : content
											}
											D.ajax.postdata('?action=customer&operation=sms_market', data, function(json){
												bootbox.hideAll();
												bootbox.alert(json.data);
											});
										}

										return false;
									}
								},
								cancel: {
									label: '取消'
								}
							}
						});
						var tag_input = $('.bootbox .form-field-tags');
						tag_input.val(mobiles.join(','));
						if( !( /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase())) ) {
							tag_input.tag({
								placeholder : tag_input.attr('placeholder'),
								source: mobiles
							});
						}else {
							//display a textarea for old IE, because it doesn't support this plugin or another one I tried!
							tag_input.after('<textarea id="'+tag_input.attr('id')+'" name="'+tag_input.attr('name')+'" rows="3">'+tag_input.val()+'</textarea>').remove();
							//$('#form-field-tags').autosize({append: "\n"});
						}
					});

					$('.send-mails').on('click', function(){
						var lists = $('.admin-checkbox:checked');
						var heivrids = [];
						$.each(lists, function(i, n){
							heivrids.push($(this).val());
						});
						window.location.href = '?action=message&operation=index&sendto=' + (heivrids.join(','));
					});
				}
			}
			jQuery(function($) {
				$('.icon-mobile-phone').on('click', function(){
					bootbox.alert('正在拨号...');
					$.ajax({
						type : 'GET',
						url : 'http://192.168.1.239/htdocs/tcp.php?callback=?',
						data : {
							action : 'call',
							data : '18561674167'
						},
						dataType : 'jsonp',
						success : function(json){
							if( json.data == 'ok' ){
								bootbox.hideAll();
								bootbox.alert('已拨出');
							}
						}
					});
				});
				$('*[type="submit"]').on('click', function(){
					D.loading.bootbox();
				});
				$('#search-high').on('click', function(){
					$(this).is(':checked') ? $('.-search-').removeClass('hide').hide().slideDown() : $('.-search-').slideUp();
				});
				$(".select2").css('width','150px').select2({allowClear:true}).on('change', function(){
					$(this).closest('form').validate().element($(this));
				});
				$(".select-big").css('width','260px');

				var oTable1 = $('#sample-table-2').dataTable( {
				"aoColumns": [
			      { "bSortable": false },
			      null, null,null, null, null,
				  { "bSortable": false }
				] } );
				
				
				$('table th input:checkbox').on('click' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});
					D.Main.checkbox();
				});
			
			
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
			
					var off2 = $source.offset();
					var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}
			});
		</script>
<style>
.tags{ width:auto;}
.console{position:fixed; bottom:0;  width:100%; z-index:3990;}
.console #console{ width:100%; height:160px;background:#000; color:white; outline:none;overflow-y: scroll;}
</style>
	<div class="console">
		<div id="console"></div>
	</div>
</body>
</html>